<template>
  <div class="hd history">

    <search-bar :menu="menu" :showsearch="false" :activeitem="activeitem"></search-bar>

    <div class="hd mt10">
      <div class="bg-white" style="margin:0">
        <position style="padding:12px;width:auto;">
          <router-link to="/cloud">云诊室</router-link>
          &gt;
          <span class="last">在线支付</span>
          <select-role @btnclick="selectFamilyHandle" class="fr"></select-role>
        </position>

        <div class="clearfix main mt20" style="padding:0;">
          <div class="center">
            <el-radio-group v-model="radio3" @change="radioChange">
              <el-radio-button v-for="(ra, i) in PAY_STATUS" :label="ra" :key="i"></el-radio-button>
            </el-radio-group>
            <div class="picker" v-show="radio3 == '已支付'">
              <el-date-picker
                v-model="value7"
                type="daterange"
                align="right"
                placeholder="选择日期范围"
                :picker-options="pickerOptions2"
                @change="datechange">
              </el-date-picker>
            </div>
          </div>



          <div  class="mt20">
            <!--待支付-->
            <div v-if="radio3 == '待支付'">
              <div v-if = "lists.length > 0">
                <div class="my_appointment" v-for="(list,index) in lists" @click="selitem(list,index)" >
                  <div class="myappoint_ul">
                    <ul class="top">
                      <li>
                        <img src="../../assets/就诊科室.png" alt="">&nbsp;&nbsp;
                        <span class="t3">就诊科室：</span>&nbsp;&nbsp;
                        <span>{{list.deptName}}</span>
                      </li>
                      <li>
                        <span class="t3">总费用：</span>&nbsp;&nbsp;
                        <span class="f20 t6">{{list.totalFee}}</span>
                        <span>元</span>
                      </li>
                    </ul>
                    <ul  class="bottom">
                      <li>
                        <img src="../../assets/就诊时间.png" alt="">&nbsp;&nbsp;
                        <span class="t3">就诊时间：</span>&nbsp;&nbsp;
                        <span>{{list.diagnosisDate}}</span>
                      </li>
                      <li>
                        <span class="checkicon el-icon-check" v-show="checkeditemnum == index && radio3 == '待支付'"></span>
                        <router-link v-show="radio3 == '已支付'" to="/personal/my-express">查看物流</router-link>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="no-data" v-else>暂无数据</div>
            </div>

            <!--已支付-->
            <div v-else>
              <div v-if = "payedlist.length > 0">
                <div class="feebox" v-for="(list,index) in payedlist" :key="index">
                  <p><span>{{list.deptName}} {{list.payedDate}}</span></p>
                  <div class="payedtips">
                    <img src="../../assets/drawable-hdpi/tips_cloud.png" alt="">
                    <span>您已完成相关费用支付！</span>
                     <el-button type="primary" @click="goExpress(list)" v-show="list.sumQuantity ==='1'">快递</el-button>
                  </div>
                  <div class="feetable">
                    <el-table :data="list.guides" style="width: 60%">
                      <el-table-column prop="itemName" label="名称" width="180"></el-table-column>
                      <el-table-column label="费用" width="180">
                        <template scope="scope">
                          <span>￥{{scope.row.totalFee}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作">
                        <!-- <template scope="scope">
            
                        </template> -->
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>

              <div class="no-data" v-else>暂无数据</div>
            </div>
          </div>

          <div class="flex-end mt20 mb20">
            <a href="javascript:;" class="common-main-button" v-show="radio3 == '待支付' && lists.length > 0" @click="topay()">前往支付</a>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {commonAjax, APPOINT_DESCRIPTION, CLOUD_MENU, ORG_ID, PLATFORM_PREFIX} from '../../api/api'
  import Loading from '../../components/Loading'
  import Position from '../../components/Position'
  import LeftTime from '../../components/LeftTime'
  import SelectRole from '../../components/SelectRole'
  import SiderMenu from '../../components/SiderMenu'
  import SearchBar from '../../components/SearchBar'

  export default {
    components: {Position, Loading, LeftTime, SelectRole, SiderMenu, SearchBar},
    data () {
      return {
        menu: CLOUD_MENU,
        activeitem: 2,
        checkeditemnum: 0,
        checkeditem: {},
        person: JSON.parse(localStorage.person),
        pageNo: 1,
        pageSize: 50,
        lists: [],
        payedlist: [],
        defaultLists: [],
        PAY_STATUS: ['待支付', '已支付'],
        APPOINT_DESCRIPTION: APPOINT_DESCRIPTION,
        radio3: '待支付',
        canRepay: true,
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value7: '',
        defaultStartDate: '2017-06-01'
      }
    },
    mounted () {
      document.body.scrollTop = 0
      if (this.$route.query.paystatus === '已支付') {
        this.radio3 = '已支付'
        this.lists = []
        let today = this.getDate()
        this.getpayedlist(this.defaultStartDate, today)
      } else {
        this.gettopaylist()
      }
    },
    methods: {
      getDate () {
        let myDate = new Date()
        let year = myDate.getFullYear()
        let month = myDate.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        let day = myDate.getDate()
        if (day < 10) {
          day = '0' + day
        }
        let today = year + '-' + month + '-' + day
        return today
      },
      datechange (val) { // 2017-10-05 - 2017-11-22
        this.getpayedlist(val.split(' - ')[0], val.split(' - ')[1])
      },
      goExpress (item) {
        localStorage.drugPayInfo = JSON.stringify(item)
        this.$router.push('/cloud_mail/sel_mail')
      },
      selitem (list, index) {
        this.checkeditemnum = index
        this.checkeditem = list
      },
      selectFamilyHandle (f) {
        this.person = f
        if (this.radio3 === '待支付') {
          this.gettopaylist(f.mpiId)
        } else {
          let today = this.getDate()
          this.getpayedlist(this.defaultStartDate, today, f.mpiId)
        }
      },
      radioChange (val) {
        if (val === '已支付') {
          this.lists = []
          let today = this.getDate()
          console.log(today)
          this.getpayedlist(this.defaultStartDate, today)
        } else {
          this.gettopaylist()
        }
      },
      topay () {
        this.$router.push({
          path: '/cloud_mail/pay_method',
          query: this.checkeditem
        })
        localStorage.drugPayInfo = JSON.stringify(this.checkeditem)
      },
      gettopaylist (id) {
        let mpiId = id || this.person.mpiId
        // add '&2' for cloudmeeting
        commonAjax(
          [mpiId, ORG_ID + '&2', '', ''], `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'findUnpayedRecords'
        ).then(res => {
          if (res.data.code === 200) {
            if (res.data.body) {
              this.lists = res.data.body
              this.checkeditem = res.data.body[0]
            } else {
              this.lists = []
              this.checkeditem = {}
            }
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
      },
      getpayedlist (start, end, id) {
        let mpiId = id || this.person.mpiId
        commonAjax(
          [mpiId, ORG_ID, start, end], `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'findPayedRecords'
        ).then(res => {
          if (res.data.code === 200) {
            if (res.data.body) {
              this.payedlist = res.data.body
            } else {
              this.payedlist = []
            }
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .history{
    .my_appointment{
      position: relative;
      padding: 0 20px;
      &:hover{
        background: #fff;
        box-shadow: 1px 1px 1px rgba(0,0,0,.5)
      }
      border-top: 1px solid #FEF2E9;
      cursor: pointer;
    }
    .content .my_appointment img{
      vertical-align: middle;
    }
    .my_appointment .illness_name{
      height: 42px;
      line-height: 42px;
      margin:0 auto;
      border-bottom: 1px dashed #FEF2E9;
    }
    .my_appointment .illness_name span:nth-of-type(1){
      font-size: 14px;
      color: #666666;
    }
    .myappoint_ul .middle{
      overflow: hidden;
      margin-top: 10px;
      margin-left:20px;
    }
    .myappoint_ul .middle li{
      display: inline-block;
      width: 33%;
    }
    .myappoint_ul .top{
      margin-top: 20px;
      margin-left:20px;
      display:flex;
      justify-content: space-between;
    }
    .myappoint_ul .bottom{
      margin-left:20px;
      padding-bottom: 20px;
      margin-top: 10px;
      display:flex;
      justify-content: space-between;
    }
    .myappoint_ul .bottom>li{
      height:22px;
    }
    .myappoint_ul .bottom span:nth-of-type(1){
      color: #999999;
    }

    .myappoint_ul .middle .name{
      display: inline-block;
    }

    .myappoint_ul .middle .right{
      width: 200px;
    }
    .myappoint_ul .middle .state span:nth-of-type(1){
      color: #666666;
    }
    .position_left_time{
      position: absolute;
      right: 60px;
      top: 70px;
    }
    .position_left_time span:nth-of-type(1){
      color: #ff9900;
    }
    .position_left_time span:nth-of-type(2){
      color: #993333;
    }
    .position_left_time div{
      width: 82px;
      line-height: 36px;
      text-align:center;
      background-color: rgb(146,59,29);
      border-radius: 4px;
      color: #ffffff;
      margin-left: 10px;
      cursor: pointer;
      &.cancel {
        background: #ccc;
        color:#fff;
      }
    }
    .border{
      height: 1px;
      background-color: #cccccc;
      margin:20px auto;
    }
    .warn{
      margin: 20px;
      li{
        color: #666666;
        margin-top: 10px;
      }
    }
  }
  .meeting_tips{
    float:right;
    color:#f35e0d;
  }
  .infobtn{
    float:right;
  }
  .infobtn span{
    color:white!important;
  }
  .checkicon{
    color:white!important;
    background-color: #f35e0d;
    display:block;
    width:22px;
    height:22px;
    border-radius: 50%;
    text-align: center;
    line-height: 23px;
    font-size:12px;
  }
  .flex-end{
    display: flex;
    justify-content: center;
  }
  .picker{
    position:absolute;
    top:0;
    right:20px;
  }
  .feebox{
    border:1px solid #F9EBE5;
    padding:10px 20px;
    margin:0 20px 10px 20px;
    background-color: #FFF9F3;
  }
  .feebox>p{
    border-bottom:1px solid #F9EBE5;
    padding-bottom:10px;
  }
  .mb20{
    margin-bottom:20px;
  }
  .feetable{
    margin:20px 0 10px 0;
    display:flex;
    justify-content: center;
  }
  .el-table th{
    background-color: #FEF5EC;
  }
  .payedtips{
    color:#AD5943;
    font-size:14px;
    text-align: center;
    font-weight:600;
    padding-top:10px;
  }
  .center{
    position: relative;
  }
</style>
